
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>AI与Apache ECharts打造专业数据可视化 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>AI与Apache ECharts打造专业数据可视化 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">结合AI与Apache ECharts进行数据可视化的主要目的是解决什么问题？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">主要目的是解决传统图表开发中涉及的繁琐代码调试、工具配置或设计调整所带来的耗时耗力问题，为时间紧迫或前端经验有限的开发者提供高效的解决方案。</div>
          </div>
          <div class="card-source">来源: AI与Apache ECharts打造专业数据可视化</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">文档中提到的用于高效图表开发的“黄金组合”技术栈包含哪些核心工具？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">技术栈包含三个核心部分：1. AI工具（如豆包、DeepSeek等），用于自然语言处理和代码生成；2. Apache ECharts，一个强大的JavaScript可视化库；3. 简单的开发环境，即任意文本编辑器和现代浏览器。</div>
          </div>
          <div class="card-source">来源: 技术栈概览</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">为什么Apache ECharts被认为是前端开发者的首选可视化工具？请列举至少三项核心优势。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Apache ECharts的核心优势包括：1. 多样化图表类型满足不同场景；2. 强大的内置交互功能（如悬停、缩放）；3. 高度可定制化以适应不同UI风格；4. 良好的跨平台支持；5. 开源免费无版权限制；6. 基于Canvas/SVG渲染，性能优越。</div>
          </div>
          <div class="card-source">来源: 为什么选择Apache ECharts？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">流程</div>
          <div class="card-question">使用AI和ECharts生成定制化图表的开发流程分为哪三个主要步骤？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">流程</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">开发流程分为三个步骤：1. 从ECharts官网的示例库获取基础代码；2. 使用AI工具，通过提供基础代码、数据和具体指令来生成定制化的HTML代码；3. 在本地环境中测试AI生成的代码，并根据需要进行优化调整。</div>
          </div>
          <div class="card-source">来源: 开发流程</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在向AI提供指令以生成ECharts代码时，一个有效的提示词（Prompt）应该包含哪些关键信息？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">一个有效的提示词应包含：粘贴的ECharts基础代码、上传的数据文件（Excel/JSON）、明确的要求，例如图表标题、使用国内可访问的库链接、生成可直接运行的HTML代码、支持保存为图片以及确保数据正确映射等。</div>
          </div>
          <div class="card-source">来源: 2、用AI生成定制化代码</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">规范</div>
          <div class="card-question">当在本地测试ECharts图表无法正常显示时，文档建议了哪三种排查方法？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">规范</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">三种排查方法是：1. 确认ECharts库的CDN链接是否有效；2. 检查数据格式是否正确，确保数值类型无误；3. 打开浏览器开发者工具（F12），在“控制台”查看是否有错误日志。</div>
          </div>
          <div class="card-source">来源: 3、本地测试与优化</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">优化</div>
          <div class="card-question">在处理大规模数据时，文档提到了哪两种方法来优化ECharts的性能？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">优化</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档提到了两种性能优化方法：1. 在series配置中启用 `large: true` 来优化渲染；2. 按需加载ECharts模块，以减少引入的文件体积。</div>
          </div>
          <div class="card-source">来源: 注意事项</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">如何让ECharts图表实现响应式布局，以适配不同大小的浏览器窗口？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以通过添加一个窗口调整事件监听器，并在回调函数中调用图表实例的 `resize()` 方法来实现。例如：`window.addEventListener('resize', () => myChart.resize());`。</div>
          </div>
          <div class="card-source">来源: 3、本地测试与优化</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">规范</div>
          <div class="card-question">在使用AI平台处理数据生成图表时，关于数据隐私方面需要注意什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">规范</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在上传敏感数据（如包含真实姓名的信息）之前，应先进行匿名化处理，例如用“学生1”这样的占位符替代真实姓名，以避免个人信息泄露。</div>
          </div>
          <div class="card-source">来源: 注意事项</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
